// hooks 封装逻辑，提供响应式数据。
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/shared'
import dayjs from 'dayjs'
// 数据懒加载函数
export const useLazyData = (apiFn) => {
  // 需要
  // 1. 被观察的对象
  // 2. 不同的API函数
  const target = ref(null)
  const list = ref([])
  // stop 是停止观察是否进入或移出可视区域的行为
  // target 是观察的目标dom容器，必须是dom容器
  const { stop } = useIntersectionObserver(
    target,
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }], observerElement) => {
      // console.log('可视区开启了', isIntersecting)
      // 根据isIntersecting状态来进行业务逻辑
      if (isIntersecting) {
        apiFn().then(({ result }) => {
          //   console.log(result)
          list.value = result
        })
        stop()
      }
    },
    // 🔔优化： 0 元素刚进入可视区触发，1 表示元素完整进入可视区才触发
    { threshold: [0] }
  )

  return { list, target }
}

// 隐藏昵称的函数
export const nicknameHide = (nickname) => {
  return nickname.slice(0, 1) + '****' + nickname.slice(-1)
}

// 将规格数组变为字符串
export const specsText = (specs) => {
  return specs.map(({ name, nameValue }) => (`${name}: ${nameValue}`)).join(' ')
}

export const useCountDownTime = () => {
  const time = ref(0)
  const timeText = ref('')
  const { resume, pause } = useIntervalFn(() => {
    time.value--
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    if (time.value <= 0) {
      pause()
    }
  }, 1000)
  const start = (date) => {
    time.value = date
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    resume()
  }
  return { time, start, timeText }
}
